{% from 'bootstrap/nav.html' import render_nav_item %} {# 导入Bootstrap-Flask的内置函数 #}
{% from 'bootstrap/utils.html' import render_messages %} {# 导入flash设置 #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}
                {% if title %}
                    {{ title }} - MyBBS
                {% else %}
                    {{'欢迎使用MyBBS'}}
                {% endif %}
            {% endblock %} 
    </title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}"> {# 引入自定义的Bootstrap css #}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/font-awesome-4.7.0/css/font-awesome.css') }}">
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">我的BBS</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                {{ render_nav_item('main.index', '首页') }} {# 使用Bootstrap-Flask内置的函数渲染导航链接 #}
            </ul>
            {% if current_user.is_authenticated %}
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('user.user_profile',username = current_user.username) }}">{{'个人主页'}}</a>
                    </li>
                </ul>
            {% endif %}
            <ul class="navbar-nav ml-auto">
                {% if not current_user.is_authenticated %}
                    {{ render_nav_item('auth.login', '登录') }}
                    {{ render_nav_item('auth.register', '注册') }}
                {% else %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Hi, {{ current_user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="{{ url_for('auth.logout') }}">{{'登出'}}</a>
                        </div>
                    </li>
                {% endif %}
            </ul>
          </div>
    </nav>
    <br>
    {{ render_messages(container=True, dismissible=True, dismiss_animate=True) }} {# 使用Bootstrap-Flask内置函数渲染闪现消息 #}
    <br>
    {% block content %}{% endblock %} {# 内容块 #}
</body>
{% block scripts %} {# JS代码块 #}
    <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
    {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.js')) }}
    {{ moment.locale('zh-cn') }} {# 设置flask-moment的语言，默认是英文 #}
{% endblock %}
</html>